<template>
  <div class="theme">
    <el-scrollbar @scroll="onScroll" height="calc(100vh - 160px)" class="left-content">
      <div class="left">
        <div class="item-box" id="a">
          <el-form ref="formRefA" :model="inForm" :rules="rules" class="demo-form" label-position="top">
            <div class="card-box">
              <div class="card">
                <div class="card-left">
                  <div class="title">呼入满意度</div>
                  <div class="text">
                    客户呼入场景下客户对座席的满意度评价。员工在客服工作台进行通话时，点击工具条可以直接发起满意度调查，此时员工挂机客户进行满意度流程。开启自动满意度后，通话由员工挂断后客户会自动进入满意评价流程，不会立刻结束通话。
                  </div>
                </div>
              </div>
              <el-divider />
              <div class="form-item">
                <span class="item-title">自动满意度：</span>
                <el-switch size="small" v-model="inForm.auto" class="switch" inline-prompt />
              </div>
              <el-form-item prop="voiceIdStart">
                <template #label>
                  <span>
                    开始提示语
                    <span class="label-tip"
                      >客户开始进行满意度评价听到的提示语。变更评价模式请注意更换提示语音
                    </span></span
                  >
                </template>
                <el-select
                  filterable
                  v-model="inForm.voiceIdStart"
                  placeholder="请选择"
                  style="margin-right: 22px; width: 300px"
                >
                  <el-option
                    v-for="(item, index) in voiceSelectList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
                <audio-operate
                  v-if="inForm.voiceIdStart"
                  :row="{
                    url: voiceMap.get(inForm.voiceIdStart)?.fileUrl,
                    isplay: voiceSelectCurrent[0].isplay,
                    _id: voiceSelectCurrent[0].id
                  }"
                  @onAudioClick="restTablePlay"
                ></audio-operate>
              </el-form-item>
              <el-form-item prop="voiceIdEnd">
                <template #label>
                  <span>
                    结束提示语
                    <span class="label-tip"
                      >手机客户按键信息后播放的提示语音。放音结束后会自动挂机，不设置任何语音，收集按钮信息后系统自动挂机
                    </span></span
                  >
                </template>
                <el-select
                  filterable
                  v-model="inForm.voiceIdEnd"
                  placeholder="请选择"
                  style="margin-right: 22px; width: 300px"
                >
                  <el-option
                    v-for="(item, index) in voiceSelectList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
                <audio-operate
                  v-if="inForm.voiceIdEnd"
                  :row="{
                    url: voiceMap.get(inForm.voiceIdEnd)?.fileUrl,
                    isplay: voiceSelectCurrent[1].isplay,
                    _id: voiceSelectCurrent[1].id
                  }"
                  @onAudioClick="restTablePlay"
                ></audio-operate>
              </el-form-item>
              <el-form-item prop="replayTimes">
                <template #label>
                  <span>
                    循环播报
                    <span class="label-tip"
                      >提示语音播放完客户未按键相应系统再次播报的次数，包含首次播报。超过设置值客户未相应系统自动挂机，挂机方为“满意度挂机”。范围1～5次
                    </span>
                  </span>
                </template>
                <el-input v-model.number="inForm.replayTimes" placeholder="请输入" style="width: 300px">
                  <template #append>次</template>
                </el-input>
              </el-form-item>
              <el-form-item label="重播间隔" prop="replayInterval">
                <template #label>
                  <span>
                    重播间隔
                    <span class="label-tip">循环播报语音的间隔，可设置1-10的整数数字，建议不要超过5秒 </span></span
                  >
                </template>
                <el-input v-model.number="inForm.replayInterval" placeholder="请输入" style="width: 300px">
                  <template #append>秒</template>
                </el-input>
              </el-form-item>
              <el-form-item class="label-position-right" prop="evaluationModel">
                <template #label> <span>评价模式</span> </template>
                <el-radio-group v-model="inForm.evaluationModel" @change="inTabTitleChange">
                  <div class="el-radio-row">
                    <el-radio :label="2">二项满意度</el-radio>
                    <div class="font_small">
                      <span>满意</span>
                      <span>不满意</span>
                    </div>
                  </div>
                  <div class="el-radio-row">
                    <el-radio :label="3">三项满意度</el-radio>
                    <div class="font_small">
                      <span>满意</span>
                      <span>一般</span>
                      <span>不满意</span>
                    </div>
                  </div>
                  <div class="el-radio-row">
                    <el-radio :label="4">四项满意度</el-radio>

                    <div class="font_small">
                      <span>非常满意</span>
                      <span>满意</span>
                      <span>一般</span>
                      <span>不满意</span>
                    </div>
                  </div>
                  <div class="el-radio-row">
                    <el-radio :label="5">五项满意度</el-radio>

                    <div class="font_small">
                      <span>非常满意</span>
                      <span>满意</span>
                      <span>一般</span>
                      <span>不满意</span>
                      <span>非常不满意</span>
                    </div>
                  </div>
                </el-radio-group>
              </el-form-item>
              <div class="form-item">
                <span class="item-title">二级评价</span>
                <el-switch size="small" v-model="inForm.enableSecond" class="switch" inline-prompt />
                <span class="item-title-tip"
                  >开启后可设置二级评价，如问题是否解决等。二级满意度提示语音循环同一级，客户未按键响应自动挂机后会记录一级满意度</span
                >
              </div>
              <div class="two-tabs" v-if="inForm.enableSecond">
                <!-- <el-form ref="formRef" :model="form.secondSatisfactions" :rules="rules" class="demo-form" > -->
                <el-tabs v-model="inActiveName" class="demo-tabs" @tab-click="inHandleClick">
                  <el-tab-pane v-for="(item, index) in inForm.secondSatisfactions" :key="index" :name="index">
                    <template #label>{{ item.firstSatisfactionLabel }} </template>
                    <el-form-item
                      :prop="'secondSatisfactions.' + index + '.voiceId'"
                      :rules="{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                      }"
                    >
                      <template #label>
                        <span>
                          开始提示语
                          <span class="label-tip"
                            >手机客户按键信息后播放的提示语音。放音结束后会自动挂机，不设置任何语音，收集按钮信息后系统自动挂机
                          </span>
                        </span>
                      </template>

                      <el-select
                        filterable
                        v-model="item.voiceId"
                        placeholder="请选择"
                        style="margin-right: 22px; width: 300px"
                      >
                        <el-option
                          v-for="(item, index) in voiceSelectList"
                          :key="index"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>

                      <audio-operate
                        v-if="item.voiceId"
                        :row="{
                          url: voiceMap.get(item.voiceId)?.fileUrl,
                          isplay: inVoiceList[index].isplay,
                          _id: inVoiceList[index].id
                        }"
                        @onAudioClick="restTablePlay"
                      ></audio-operate>
                    </el-form-item>
                    <el-form-item
                      :prop="'secondSatisfactions.' + index + '.keys.' + idx + '.key'"
                      :rules="{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                      }"
                      v-for="(it, idx) in item.keys"
                      :key="idx"
                    >
                      <el-input
                        class="input-with-select"
                        v-model.number="it.label"
                        placeholder="请输入"
                        maxlength="50"
                        show-word-limit
                        style="margin-right: 22px; width: 300px"
                      >
                        <template #prepend>
                          <el-select
                            filterable
                            v-model="it.key"
                            placeholder="请选择"
                            @change="inChangeSelect"
                            style="width: 100px"
                          >
                            <el-option
                              v-for="(item, index) in numberKey"
                              :key="index"
                              :label="item.label"
                              :value="item.value"
                              :disabled="inPublicArr.includes(item.value)"
                            />
                          </el-select>
                        </template>
                      </el-input>
                      <i v-if="idx === 0" class="MC_iconfont MC_icon-tianjia-yuan-xian add" @click="inAdd"></i>
                      <i v-else class="MC_iconfont MC_icon-shanchu2-xian del" @click="inDel(idx)"></i>
                    </el-form-item>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </el-form>
        </div>
        <div class="item-box" id="b">
          <el-form ref="formRefB" :model="outForm" :rules="rules" class="demo-form" label-position="top">
            <div class="card-box">
              <div class="card">
                <div class="card-left">
                  <div class="title">外呼满意度</div>
                  <div class="text">
                    座席外呼客户场景下客户对座席的满意度评价，包含外呼任务。员工在客服工作台进行通话时，点击工具条可以直接发起满意度调查，此时员工挂机客户进行满意度流程。开启自动满意度后，通话由员工挂断后客户会自动进入满意度评价流程，不会立刻结束通话。
                  </div>
                </div>
              </div>
              <el-divider />
              <div class="form-item">
                <span class="item-title">自动满意度：</span>
                <el-switch size="small" v-model="outForm.auto" class="switch" inline-prompt />
              </div>

              <el-form-item prop="voiceIdStart">
                <template #label>
                  <span>
                    开始提示语
                    <span class="label-tip"
                      >客户开始进行满意度评价听到的提示语。变更评价模式请注意更换提示语音
                    </span></span
                  >
                </template>
                <el-select
                  filterable
                  v-model="outForm.voiceIdStart"
                  placeholder="请选择"
                  style="margin-right: 22px; width: 300px"
                >
                  <el-option
                    v-for="(item, index) in voiceSelectList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
                <audio-operate
                  v-if="outForm.voiceIdStart"
                  :row="{
                    url: voiceMap.get(outForm.voiceIdStart)?.fileUrl,
                    isplay: voiceSelectCurrent[2].isplay,
                    _id: voiceSelectCurrent[2].id
                  }"
                  @onAudioClick="restTablePlay"
                ></audio-operate>
              </el-form-item>
              <el-form-item prop="voiceIdEnd">
                <template #label>
                  <span>
                    结束提示语
                    <span class="label-tip"
                      >手机客户按键信息后播放的提示语音。放音结束后会自动挂机，不设置任何语音，收集按钮信息后系统自动挂机
                    </span>
                  </span>
                </template>

                <el-select
                  filterable
                  v-model="outForm.voiceIdEnd"
                  placeholder="请选择"
                  style="margin-right: 22px; width: 300px"
                >
                  <el-option
                    v-for="(item, index) in voiceSelectList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
                <audio-operate
                  v-if="outForm.voiceIdEnd"
                  :row="{
                    url: voiceMap.get(outForm.voiceIdEnd)?.fileUrl,
                    isplay: voiceSelectCurrent[3].isplay,
                    _id: voiceSelectCurrent[3].id
                  }"
                  @onAudioClick="restTablePlay"
                ></audio-operate>
              </el-form-item>
              <el-form-item prop="replayTimes">
                <template #label>
                  <span>
                    循环播报
                    <span class="label-tip"
                      >提示语音播放完客户未按键相应系统再次播报的次数，包含首次播报。超过设置值客户未相应系统自动挂机，挂机方为“满意度挂机”。范围1～5次
                    </span>
                  </span>
                </template>
                <el-input v-model.number="outForm.replayTimes" placeholder="请输入" style="width: 300px">
                  <template #append>次</template>
                </el-input>
              </el-form-item>

              <el-form-item label="重播间隔" prop="replayInterval">
                <template #label>
                  <span>
                    重播间隔
                    <span class="label-tip">循环播报语音的间隔，可设置1-10的整数数字，建议不要超过5秒 </span></span
                  >
                </template>
                <el-input v-model.number="outForm.replayInterval" placeholder="请输入" style="width: 300px">
                  <template #append>秒</template>
                </el-input>
              </el-form-item>
              <el-form-item class="label-position-right" prop="evaluationModel">
                <template #label> <span>评价模式</span> </template>
                <el-radio-group v-model="outForm.evaluationModel" @change="outTabTitleChange">
                  <div class="el-radio-row">
                    <el-radio :label="2">二项满意度</el-radio>
                    <div class="font_small">
                      <span>满意</span>
                      <span>不满意</span>
                    </div>
                  </div>
                  <div class="el-radio-row">
                    <el-radio :label="3">三项满意度</el-radio>
                    <div class="font_small">
                      <span>满意</span>
                      <span>一般</span>
                      <span>不满意</span>
                    </div>
                  </div>
                  <div class="el-radio-row">
                    <el-radio :label="4">四项满意度</el-radio>

                    <div class="font_small">
                      <span>非常满意</span>
                      <span>满意</span>
                      <span>一般</span>
                      <span>不满意</span>
                    </div>
                  </div>
                  <div class="el-radio-row">
                    <el-radio :label="5">五项满意度</el-radio>

                    <div class="font_small">
                      <span>非常满意</span>
                      <span>满意</span>
                      <span>一般</span>
                      <span>不满意</span>
                      <span>非常不满意</span>
                    </div>
                  </div>
                </el-radio-group>
              </el-form-item>

              <div class="form-item">
                <span class="item-title">二级评价</span>
                <el-switch size="small" v-model="outForm.enableSecond" class="switch" inline-prompt />
                <span class="item-title-tip"
                  >开启后可设置二级评价，如问题是否解决等。二级满意度提示语音循环同一级，客户未按键响应自动挂机后会记录一级满意度</span
                >
              </div>

              <div class="two-tabs" v-if="outForm.enableSecond">
                <!-- <el-form ref="formRef" :model="form.secondSatisfactions" :rules="rules" class="demo-form" > -->
                <el-tabs v-model="outActiveName" class="demo-tabs" @tab-click="outHandleClick">
                  <el-tab-pane v-for="(item, index) in outForm.secondSatisfactions" :key="index" :name="index">
                    <template #label>{{ item.firstSatisfactionLabel }} </template>
                    <el-form-item
                      :prop="'secondSatisfactions.' + index + '.voiceId'"
                      :rules="{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                      }"
                    >
                      <template #label>
                        <span>
                          开始提示语
                          <span class="label-tip"
                            >手机客户按键信息后播放的提示语音。放音结束后会自动挂机，不设置任何语音，收集按钮信息后系统自动挂机
                          </span>
                        </span>
                      </template>
                      <el-select
                        filterable
                        v-model="item.voiceId"
                        placeholder="请选择"
                        style="margin-right: 22px; width: 300px"
                      >
                        <el-option
                          v-for="(item, index) in voiceSelectList"
                          :key="index"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                      <audio-operate
                        :key="index"
                        v-if="item.voiceId"
                        :row="{
                          url: voiceMap.get(item.voiceId)?.fileUrl,
                          isplay: outVoiceList[index].isplay,
                          _id: outVoiceList[index].id
                        }"
                        @onAudioClick="restTablePlay"
                      ></audio-operate>
                    </el-form-item>
                    <el-form-item
                      :prop="'secondSatisfactions.' + index + '.keys.' + idx + '.key'"
                      :rules="{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                      }"
                      v-for="(it, idx) in item.keys"
                      :key="idx"
                    >
                      <el-input
                        class="input-with-select"
                        v-model.number="it.label"
                        placeholder="请输入"
                        maxlength="50"
                        show-word-limit
                        style="margin-right: 22px; width: 300px"
                      >
                        <template #prepend>
                          <el-select
                            filterable
                            v-model="it.key"
                            placeholder="请选择"
                            @change="outChangeSelect"
                            style="width: 100px"
                          >
                            <el-option
                              v-for="(item, index) in numberKey"
                              :key="index"
                              :label="item.label"
                              :value="item.value"
                              :disabled="outPublicArr.includes(item.value)"
                            />
                          </el-select>
                        </template>
                      </el-input>
                      <i v-if="idx === 0" class="MC_iconfont MC_icon-tianjia-yuan-xian add" @click="outAdd"></i>
                      <i v-else class="MC_iconfont MC_icon-shanchu2-xian del" @click="outDel(idx)"></i>
                    </el-form-item>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </el-scrollbar>

    <div class="right">
      <Nav :headers="navArr" @onScrollNav="onScrollNav" :toId="toId"></Nav>
    </div>
    <div class="footer">
      <div class="footer-button">
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, watch, defineComponent } from 'vue'
import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
import Nav from '@/common/components/right-nav/index.vue'
import audioOperate from '@/common/components/audio/audio-operate.vue'
import { getData, saveData, queryData } from '@app/call-center/apis/caller-state'
import { ElMessage } from 'element-plus'
import mcCache from '@/common/utils/mc-get-cache'
import { userModule } from '@/common/store/modules/user'
export default defineComponent({
  name: 'AdminMain',
  components: {
    Nav,
    audioOperate
  },
  // ----------------生命周期-----------------------
  setup() {
    const USERMODULE = userModule()
    const state = reactive({
      inForm: {
        evaluationModel: 2,
        voiceIdStart: '',
        voiceIdEnd: '',
        secondSatisfactions: [
          {
            firstSatisfaction: '1',
            firstSatisfactionLabel: '满意',
            keys: [
              { key: '1', label: '对态度非常满意' },
              { key: '2', label: '对服务非常满意' }
            ],
            voiceId: ''
          },
          {
            firstSatisfaction: '2',
            firstSatisfactionLabel: '不满意',
            keys: [
              { key: '1', label: '对态度非常不满意' },
              { key: '2', label: '对服务非常不满意' }
            ],
            voiceId: ''
          }
        ],
        replayTimes: 1,
        replayInterval: 1,
        auto: true,
        type: 'in',
        enableSecond: false
      },
      outForm: {
        evaluationModel: 2,
        voiceIdStart: '',
        voiceIdEnd: '',
        secondSatisfactions: [
          {
            firstSatisfaction: '1',
            firstSatisfactionLabel: '满意',
            keys: [
              { key: '1', label: '对态度非常满意' },
              { key: '2', label: '对服务非常满意' }
            ],
            voiceId: ''
          },
          {
            firstSatisfaction: '2',
            firstSatisfactionLabel: '不满意',
            keys: [
              { key: '1', label: '对态度非常不满意' },
              { key: '2', label: '对服务非常不满意' }
            ],
            voiceId: ''
          }
        ],
        replayTimes: 1,
        replayInterval: 1,
        auto: true,
        type: 'out',
        enableSecond: false
      },
      inActiveName: 0,
      outActiveName: 0,
      navArr: [
        { name: '呼入满意度', id: 'a' },
        { name: '外呼满意度', id: 'b' }
      ],
      toId: 'a',
      numberKey: [
        { value: '0', label: '按键0' },
        { value: '1', label: '按键1' },
        { value: '2', label: '按键2' },
        { value: '3', label: '按键3' },
        { value: '4', label: '按键4' },
        { value: '5', label: '按键5' },
        { value: '6', label: '按键6' },
        { value: '7', label: '按键7' },
        { value: '8', label: '按键8' },
        { value: '9', label: '按键9' }
      ],
      voiceSelectList: [{ name: '', id: '' }], //语音下拉框数据
      voiceSelectCurrent: [
        { voiceId: '', isplay: false, id: '1' },
        { voiceId: '', isplay: false, id: '2' },
        { voiceId: '', isplay: false, id: '3' },
        { voiceId: '', isplay: false, id: '4' }
      ], //当前语音下拉框数据
      inVoiceList: [{ voiceId: '', isplay: false, id: 'in1' }],
      outVoiceList: [{ voiceId: '', isplay: false, id: 'out1' }],
      inPublicArr: [], //二级评价按键停用
      outPublicArr: [], //二级评价按键停用
      voiceMap: new Map(), //根据id查找语音url
      // 表单校验
      rules: {
        voiceIdStart: [{ required: true, message: '必填', trigger: 'blur' }],
        voiceIdEnd: [{ required: true, message: '必填', trigger: 'blur' }],
        replayTimes: [{ required: true, message: '请输入1-5内的整数', type: 'number', min: 1, max: 5 }],
        replayInterval: [{ required: true, message: '请输入1-10内的整数', type: 'number', min: 1, max: 10 }],
        evaluationModel: [{ required: true, message: '必填', trigger: 'blur' }]
      }
    })
    watch(
      //监听评价模式循环对应二级评价个数
      () => state.inForm.evaluationModel,
      (val) => {
        state.inVoiceList = new Array(state.inForm.evaluationModel || 0).fill(0).map((item, index) => ({
          voiceId: '',
          isplay: false,
          id: 'in' + index
        }))
        console.log('w1', state.inVoiceList)
      },
      { immediate: true }
    )
    watch(
      () => state.outForm.evaluationModel,
      (val) => {
        state.outVoiceList = new Array(state.outForm.evaluationModel || 0).fill(0).map((item, index) => ({
          voiceId: '',
          isplay: false,
          id: 'out' + index
        }))
      },
      { immediate: true }
    )
    const instance: any = getCurrentInstance()
    async function save() {
      //保存
      let formRefA = false
      let formRefB = false
      await instance?.refs.formRefA
        .validate()
        .then(() => {
          formRefA = true
        })
        .catch((err: any) => {
          const key = Object.keys(err)
          if (key[0].split('.')[1]) {
            const oldInActiveName = state.inActiveName //处理跳转只按之前的active
            state.inActiveName = parseInt(key[0].split('.')[1])
            inChangeSelect() //清空二级评价数字按钮
            instance?.refs.formRefA.scrollToField(`secondSatisfactions.${oldInActiveName}.voiceId`)
          } else {
            instance?.refs.formRefA.scrollToField(key[0])
          }
          return
        })
      if (!formRefA) return //a执行成功了 才执行b
      await instance?.refs.formRefB
        .validate()
        .then(() => {
          formRefB = true
        })
        .catch((err: any) => {
          const key = Object.keys(err)
          if (key[0].split('.')[1]) {
            const oldInActiveName = state.outActiveName //处理跳转只按之前的active
            state.outActiveName = parseInt(key[0].split('.')[1])
            outChangeSelect()
            instance?.refs.formRefB.scrollToField(`secondSatisfactions.${oldInActiveName}.voiceId`)
          } else {
            instance?.refs.formRefB.scrollToField(key[0])
          }
        })
      if (formRefA && formRefB) {
        saveData({ inConfig: state.inForm, outConfig: state.outForm }).then((res) => {
          if (res.success) {
            ElMessage({ message: '保存成功', type: 'success' })
            callList()
          }
        })
      }
    }
    //二级评价添加
    function inAdd() {
      state.inForm.secondSatisfactions[state.inActiveName].keys.push({ key: '', label: '' })
    }
    //二级评价删除
    function inDel(index: number) {
      state.inForm.secondSatisfactions[state.inActiveName].keys.splice(index, 1)
    }
    //二级评价添加
    function outAdd() {
      state.outForm.secondSatisfactions[state.outActiveName].keys.push({ key: '', label: '' })
    }
    //二级评价删除
    function outDel(index: number) {
      state.outForm.secondSatisfactions[state.outActiveName].keys.splice(index, 1)
    }
    //获取数据
    function callList() {
      getData({ accountId: USERMODULE.accountId || '' }).then((res) => {
        if (res.success) {
          // state.listArr = res.data || []
          state.inForm = res.data ? res.data.inConfig : state.inForm
          state.outForm = res.data ? res.data.outConfig : state.outForm
          state.inForm.secondSatisfactions ? inChangeSelect() : inTabTitleChange(state.inForm.evaluationModel)
          state.outForm.secondSatisfactions ? outChangeSelect() : outTabTitleChange(state.outForm.evaluationModel)
        }
      })
    }
    // 监听下拉框值的变化，实时更新公共选项列表（选项的添加与删除）
    const inChangeSelect = () => {
      ;(state.inPublicArr as any) = state.inForm.secondSatisfactions[state.inActiveName].keys.map((item: any) => {
        return item.key
      })
    }
    // 监听下拉框值的变化，实时更新公共选项列表（选项的添加与删除）
    const outChangeSelect = () => {
      ;(state.outPublicArr as any) = state.outForm.secondSatisfactions[state.outActiveName].keys.map((item: any) => {
        return item.key
      })
    }
    //呼入二级评价tab
    function inHandleClick(tab: any, event: any) {
      state.inActiveName = tab.props.name
      inChangeSelect()
    }
    //外呼二级评价tab
    function outHandleClick(tab: any, event: any) {
      state.outActiveName = tab.props.name
      outChangeSelect()
    }
    //呼入评价模式tab
    function inTabTitleChange(tab: number) {
      switch (tab) {
        case 2:
          state.inForm.secondSatisfactions = [
            {
              firstSatisfaction: '1',
              firstSatisfactionLabel: '满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            },
            {
              firstSatisfaction: '2',
              firstSatisfactionLabel: '不满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            }
          ]
          break
        case 3:
          state.inForm.secondSatisfactions = [
            {
              firstSatisfaction: '1',
              firstSatisfactionLabel: '满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            },
            {
              firstSatisfaction: '2',
              firstSatisfactionLabel: '一般',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            },
            {
              firstSatisfaction: '3',
              firstSatisfactionLabel: '不满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            }
          ]
          break
        case 4:
          state.inForm.secondSatisfactions = [
            {
              firstSatisfaction: '1',
              firstSatisfactionLabel: '非常满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            },
            {
              firstSatisfaction: '2',
              firstSatisfactionLabel: '满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            },
            {
              firstSatisfaction: '3',
              firstSatisfactionLabel: '一般',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            },
            {
              firstSatisfaction: '4',
              firstSatisfactionLabel: '不满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            }
          ]
          break
        case 5:
          state.inForm.secondSatisfactions = [
            {
              firstSatisfaction: '1',
              firstSatisfactionLabel: '非常满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            },
            {
              firstSatisfaction: '2',
              firstSatisfactionLabel: '满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            },
            {
              firstSatisfaction: '3',
              firstSatisfactionLabel: '一般',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            },
            {
              firstSatisfaction: '4',
              firstSatisfactionLabel: '不满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            },
            {
              firstSatisfaction: '5',
              firstSatisfactionLabel: '非常不满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            }
          ]
          break

        default:
          break
      }
      inChangeSelect()
    }
    //外呼评价模式tab
    function outTabTitleChange(tab: number) {
      switch (tab) {
        case 2:
          state.outForm.secondSatisfactions = [
            {
              firstSatisfaction: '1',
              firstSatisfactionLabel: '满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            },
            {
              firstSatisfaction: '2',
              firstSatisfactionLabel: '不满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            }
          ]
          break
        case 3:
          state.outForm.secondSatisfactions = [
            {
              firstSatisfaction: '1',
              firstSatisfactionLabel: '满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            },
            {
              firstSatisfaction: '2',
              firstSatisfactionLabel: '一般',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            },
            {
              firstSatisfaction: '3',
              firstSatisfactionLabel: '不满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            }
          ]
          break
        case 4:
          state.outForm.secondSatisfactions = [
            {
              firstSatisfaction: '1',
              firstSatisfactionLabel: '非常满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            },
            {
              firstSatisfaction: '2',
              firstSatisfactionLabel: '满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            },
            {
              firstSatisfaction: '3',
              firstSatisfactionLabel: '一般',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            },
            {
              firstSatisfaction: '4',
              firstSatisfactionLabel: '不满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            }
          ]
          break
        case 5:
          state.outForm.secondSatisfactions = [
            {
              firstSatisfaction: '1',
              firstSatisfactionLabel: '非常满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            },
            {
              firstSatisfaction: '2',
              firstSatisfactionLabel: '满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            },
            {
              firstSatisfaction: '3',
              firstSatisfactionLabel: '一般',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            },
            {
              firstSatisfaction: '4',
              firstSatisfactionLabel: '不满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            },
            {
              firstSatisfaction: '5',
              firstSatisfactionLabel: '非常不满意',
              keys: [{ key: '', label: '' }],
              voiceId: ''
            }
          ]
          break

        default:
          break
      }
      outChangeSelect()
    }
    // 滚动事件，对应右侧更改
    const onScroll = (obj: any) => {
      for (var i = 0; i < state.navArr.length; i++) {
        if (state.navArr[i].id != '') {
          const offsetHight = (document as any).getElementById(`${state.navArr[i].id}`).offsetTop
          if (obj.scrollTop >= offsetHight) {
            state.toId = state.navArr[i].id
          }
        }
      }
    }
    // 点击锚点事件，进行页面跳转
    function onScrollNav(link: string) {
      if ((document as any).getElementById(link)) {
        ;(document as any).getElementById(link).scrollIntoView({ behavior: 'smooth' })
      }
    }
    // 点击列表的听取录音，重置其他数据
    const restTablePlay = (data: any) => {
      const arr: any = []
      state.voiceSelectCurrent.forEach((item: any) => {
        if (item.id === data._id) {
          item.isplay = data.isplay
        } else {
          item.isplay = false
        }
        arr.push(item)
      })
      state.voiceSelectCurrent = arr
      const inArr: any = []
      state.inVoiceList.forEach((item: any) => {
        if (item.id === data._id) {
          item.isplay = data.isplay
        } else {
          item.isplay = false
        }
        inArr.push(item)
      })
      state.inVoiceList = inArr
      const outArr: any = []
      state.inVoiceList.forEach((item: any) => {
        if (item.id === data._id) {
          item.isplay = data.isplay
        } else {
          item.isplay = false
        }
        outArr.push(item)
      })
      state.inVoiceList = outArr
    }

    onMounted(async () => {
      callList()
      state.voiceSelectList = await mcCache.$getCache('voiceLibrary')
      const data = new Map()
      state.voiceSelectList.forEach((element: any) => {
        data.set(element.id, element)
      })
      console.log('data', data)
      state.voiceMap = data
    })
    return {
      ...toRefs(state),
      onScrollNav,
      onScroll,
      save,
      inAdd,
      inDel,
      outAdd,
      outDel,
      inHandleClick,
      outHandleClick,
      inChangeSelect,
      outChangeSelect,
      inTabTitleChange,
      outTabTitleChange,
      restTablePlay
    }
  }
})
</script>

<style lang="stylus" scoped>
.el-radio-row
  display: flex;
  width:100%;

.font_small {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.38);

  span {
    margin-right: 40px;
  }
}

.theme {
  display: flex;
  width: 100%;
  padding-top: 24px
}
#b
  margin-bottom 60px
.el-divider--horizontal
  margin 16px 0
.left {
  width: 80%;
}
.left-content
  width: 100%;
.right {
  width: 15%
  position absolute
  right 0
}

.footer {
  position: fixed;
  bottom: 0;
  left: 240px;
  height: 60px;
  width: calc(100% - 240px);
  box-shadow: 0 0 4px 0 #e0e6f0;
  background: #fff;
  display: flex;
  justify-content: end;
  align-items: center;

  .footer-button {
    padding: 0 24px;
  }
}

.item-box {
  margin-bottom: 16px;
}

.card {
  border-radius: 4px;
  margin-bottom: 16px;

  .title {
    font-family: 'PingFang SC';
    font-size 14px
    margin-bottom 8px
    font-weight: 500;
    line-height: 20px;
  }

  .text {
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.001em;
    color: rgba(0, 0, 0, 0.6);
  }
}

.card-box {
  border: 1px solid var(--mc-gray4-color);
  padding: 16px;
  margin-bottom 16px
  border-radius: 4px;

  .card-icon {
    display: flex;
    align-items: center;
  }

  .add {
    color: var(--mc-main-color);
    font-size: 14px;
  }
  .del {
    color: rgba(0,0,0,0.38);
    font-size: 14px;
  }
}

.form-item
  font-weight: 400
  font-size: 14px
  margin 16px 0
  line-height: 20px;
  letter-spacing: 0.001em;
  color: rgba(0, 0, 0, 0.88);
  .item-title
    margin-right:24px
  .item-title-tip
    margin-left:24px
    font-size: 12px;
    line-height: 18px;
    color: rgba(0, 0, 0, 0.38);

.label-tip {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.001em;
  color: rgba(0, 0, 0, 0.38);
}
.two-tabs{
  background: var(--mc-gray1-color);
  border-radius: 4px;
  padding: 0px 16px 16px;
  margin-left: 78px
}
:deep(.label-position-right)
  display: flex;
  .el-form-item__label
    line-height: 28px !important;
    margin-right:25px
:deep(.el-radio)
  margin-right:40px
:deep(.demo-tabs .el-form-item)
  margin-bottom: 16px;
:deep(.demo-tabs .el-input__wrapper)
  background-color:#fff !important;
:deep(.demo-tabs .el-tabs__nav-wrap::after)
  height:1px
:deep(.demo-tabs .el-tabs__item)
  font-weight: 400;
:deep(.demo-tabs .is-active)
  font-weight: 500;
</style>
